<div class="form-group col-md-{$_layout[$form[type].name]|default='12'} {$form[type].extra_class|default=''}" id="form_group_{$form[type].name}">
	<label class="col-xs-12" for="{$form[type].name}">{$form[type].title|htmlspecialchars}</label>
	<div class="col-xs-12">
		<div id="selimage_list_{$form[type].name}" class="selimage-list">
			{notempty name="form[type].value"}
			{php}
			$value_arr=array();
			$value_arr=explode(",",$form[type]["value"]);
			{/php}
			{volist name="value_arr" id="nv"}
			<div class="file-item thumbnail" sel_id="{$nv}">
				<a class="img-link" href="{$nv|get_file_path}" target="_blank">
					<img src="{$nv|get_thumb}" width="100">
				</a>
				<i class="fa fa-times-circle remove-picture" sel_name="{$form[type].name}"></i>
			</div>
			{/volist}
			{/notempty}
		</div>
		<div class="clearfix"></div>
		<input type="hidden" name="{$form[type].name}" data-multiple="{$form[type]['multiple']|default=0}" data-size="{$form[type]['size']|default=0}" data-ext='{$form[type]["ext"]|default=""}' id="{$form[type].name}" value="{$form[type].value|default=''}">
		<script id="{$form[type].name}_json" type="text/html">
			{:json_encode($value_arr)}
		</script>
		<button sel_id="{$form[type].name}" class="btn btn-minw btn-primary js-selimage-picker" type="button">选择{$form[type].title}</button>
		{notempty name="form[type].tips"}
		<div class="help-block">{$form[type].tips|clear_js}</div>
		{/notempty}
	</div>
</div>
{notempty name="images_tab"}
<style>
	#images_tab
	{
		background-color: #f2f2f2;
		padding: 10px;
	}
	#images_tab ul,#images_tab li
	{
		margin: 0px;
		padding: 0px;
		overflow: auto;
	}
	#images_tab li:before
	{
		content: "\2714";
		display: block;
		position: absolute;
		margin: 60px;
		left: 0;
		bottom: 0;
		right: 0;
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: #00c09e;
		border-radius: 50px;
		color: #fff;
		text-align: center;
		font-size: 16px;
		z-index: 10;
		opacity: 0;

		-o-user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		cursor: pointer;
	}
	#images_tab li
	{
		position: relative;
		list-style: none;
		float: left;
		padding: 5px;
		margin: 2px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
	#images_tab li.selected:before
	{
		opacity: 1;
	}

	/* img selection */
	#images_tab li.selected img
	{
		box-shadow: 0 0 0 4px #00c09e;

	}
	#images_tab li img
	{
		width: 157px;
		height: 137px;
		border-radius: 10px;
	}

	/* button */

	#images_tab .clearfix
	{
		padding: 10px;
		position: fixed;
		z-index: 999;
		background-color: #FFFFFF;
		width: 100%;
		top: 42px;
		left: 0px;
		border-bottom: 1px solid #dcdcdc;
	}
	#images_tab .clearfix:after
	{
		content: "";
		display: table;
	}

	#images_tab button
	{
		height: 45px;
		margin: 0 7px;
		padding: 5px 0;
		font-weight: 700;
		font-size: 15px;
		letter-spacing: 2px;
		color: #fff;
		border: 0;
		border-radius: 2px;
		text-transform: uppercase;
		outline: 0;
	}

	#images_tab button.select
	{
		float: left;
		background: #435a6b;
		cursor: pointer;
		width: 150px;
	}

	#images_tab button.select:before, #images_tab button.select:after
	{
		position: absolute;
		display: block;
		content: '全选';
		width: 150px;
		text-align: center;
	}

	#images_tab button.select:after
	{
		content: '取消选择';
		margin-top: 20px;
		opacity: 0;
	}

	#images_tab button.select.selected:before
	{
		transform: translate(0,-38px);
		-o-transform: translate(0,-38px);
		-ms-transform: translate(0,-38px);
		-moz-transform: translate(0,-38px);
		-webkit-transform: translate(0,-38px);
		opacity: 0;

	}

	#images_tab button.select.selected:after
	{
		transform: translate(0,-38px);
		-o-transform: translate(0,-38px);
		-ms-transform: translate(0,-38px);
		-moz-transform: translate(0,-38px);
		-webkit-transform: translate(0,-38px);
		opacity: 1;
	}

	#images_tab button.send
	{
		float: right;
		margin-right:33px;
		background: #aaa;
		padding: 0px 15px;
		transition: 0.3s linear;
		-o-transition: 0.3s linear;
		-ms-transition: 0.3s linear;
		-moz-transition: 0.3s linear;
		-webkit-transition: 0.3s linear;
	}

	#images_tab button.send.selected
	{
		background: #00c09e;
		cursor: pointer;
	}

	#images_tab button.send:after
	{
		position: absolute;
		content: attr(data-counter);
		padding: 5px 8px;
		margin: -29px 0 0 0px;
		line-height: 100%;
		border: 2px #fff solid;
		border-radius: 60px;
		background: #00c09e;

		opacity: 0;
	}

	#images_tab .sel_image_title
	{
		text-align: center;
		font-size: 11px;
		max-width: 157px;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: normal;
		white-space: nowrap;
		word-break: break-all;
		padding: 7px 0px 0px 0px;
	}

	#images_tab button.send.selected:after
	{
		opacity: 1;
	}
</style>

<div id="images_tab" style="display:none;{$form[type]['multiple']*76}px;">
	{if condition="$form[type]['multiple'] == '1'"}
	<div class="clearfix">
		<button class="select" type="button">&nbsp;</button>

		<button class="send" type="button" data-counter="0">&#10004;</button>
	</div>
	{/if}
	<ul>
		{volist name="images_tab" id="file"}
		<li id="images_tab_{$file.id}" sel_id="{$file.id}" sel_path="{$file.id|get_file_path}" sel_img="{$file.id|get_thumb}">
			<div><img src="{$file['id']|get_thumb}" /></div>
			<div class="sel_image_title">
				{$file["name"]}</div>
		</li>
		{/volist}
	</ul>
</div>

<script>
	//添加模板
	function sel_image_temp(id,path,img){
		var sel_html = '<div class="file-item thumbnail" sel_id="'+id
		+'"><a class="img-link" target="_blank" href="'+path
		+'"><img src="'+img+'" width="100"></a><i class="fa fa-times-circle remove-picture"></i></div>';
		return sel_html;
	}

	//设置对象值
	function sel_image_setVlaue(sel_name,sel_vo){
		var html ="";
		var new_values=[];
		$(sel_vo).each(function(index,sel_item){
				new_values.push(sel_item.id);
				html+=sel_image_temp(sel_item.id,sel_item.path,sel_item.img);
			});
		$("#selimage_list_"+sel_name).html(html);
		//设置值
		$("#"+sel_name+"_json").html(JSON.stringify(new_values));
		$("#"+sel_name).val(new_values.join(","));
	}

	// number of selected items
	function sel_image_counter() {
		if ($('#images_tab li.selected').length > 0)
		$('#images_tab .send').addClass('selected');
		else
		$('#images_tab .send').removeClass('selected');
		$('#images_tab .send').attr('data-counter',$('#images_tab li.selected').length);
	}

	window.onload =function(){
		$(function() {
				// 打开图片选择器
				$('.js-selimage-picker').click(function(){
						var sel_id  = $(this).attr("sel_id");
						var selimage_obj = $("#"+sel_id);
						var sel_name = selimage_obj.attr("name");
						var multiple = selimage_obj.attr("data-multiple");
						var old_values = JSON.parse($("#"+sel_name+"_json").html());

						var layer_selimage = layer.open({
								type: 1,
								title: '图片选择器',
								area: ['90%', '90%'],
								scrollbar: false,
								content: $('#images_tab'),
								success: function(layero, index){
									//设置已经选中的值
									$(old_values).each(function(index,value){
											$("#images_tab_"+value).addClass("selected");
										});
									sel_image_counter();
									$('#images_tab li').unbind("click");
									$('#images_tab li').bind("click",function(){
											var now_sel_id = $(this).attr("sel_id");
											var now_sel_path = $(this).attr("sel_path");
											var now_sel_img = $(this).attr("sel_img");
											if($(this).hasClass("selected")){
												$(this).removeClass("selected");
												if(multiple == "1"){
													sel_image_counter();
												}
											}else{
												if(multiple == "0"){
													//删除以前选择的
													$('#images_tab li').removeClass("selected");
													$(this).addClass("selected");
													selimage_obj.val(now_sel_id);
													sel_image_setVlaue(selimage_obj.attr("name"),[{
																id:now_sel_id,
																path:now_sel_path,
																img:now_sel_img
															}]);
													layer.close(index);
												}else{
													$(this).addClass("selected");
													sel_image_counter();
												}
											}
										});
									$('#images_tab .select').unbind("click");
									$('#images_tab .select').bind("click",function () {
											if ($('#images_tab li.selected').length == 0) {
												$('#images_tab li').addClass('selected');
												$('#images_tab .select').addClass('selected');
											}
											else {
												$('#images_tab li').removeClass('selected');
												$('#images_tab .select').removeClass('selected');
											}
											sel_image_counter();
										});

									$('#images_tab .send').unbind("click");
									$('#images_tab .send').bind("click",function () {
											if ($('#images_tab li.selected').length == 0) {
												return false;
											}
											else {
												var sel_values=[];
												$('#images_tab li.selected').each(function(index,sel_li){
														var now_sel_id = $(this).attr("sel_id");
														var now_sel_path = $(this).attr("sel_path");
														var now_sel_img = $(this).attr("sel_img");

														sel_values.push({
																id:now_sel_id,
																path:now_sel_path,
																img:now_sel_img
															});
													});

												sel_image_setVlaue(selimage_obj.attr("name"),sel_values);
												layer.close(index);
											}
										});
								}
							});
					});

				$(".selimage-list").on("click",".remove-picture",function(){
						var _item = $(this).parent();
						var old_v = _item.attr("sel_id");
						var sel_name = $(this).attr("sel_name");
						//去掉项
						var old_values = JSON.parse($("#"+sel_name+"_json").html());
						var new_values = [];
						$(old_values).each(function(index,v){
								if(v != old_v){
									new_values.push(v);
								}
							});
						$("#"+sel_name+"_json").html(JSON.stringify(new_values));
						$("#"+sel_name).val(new_values.join(","));
						_item.remove();
					});


			});
	}
</script>

{/notempty}
